<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格应用</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            /*background: #f8fbff;*/
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        .even{
            background: #d7ebff;
        }
        .odd{
            background: #fffef5;
        }
        .highLight{
            color: #fffd00;
            background: #9c3a00;
        }
     </style>
</head>
<body>
<div class="container">
    <br>
    <h1>表单应用</h1>
    <hr>
    <br>
    <h3>表格隔行变色</h3>
    <div class="row" id="table1">
        <div class="col-md-6 col-md-offset-3">
            <table class="table table-bordered">
                <thead>
                    <tr><th>姓 名</th><th>性 别</th><th>出生年份</th><th>家乡</th></tr>
                </thead>
                <tbody>
                    <tr><td>贝多芬</td><td>男</td><td>1770</td><td>德国-波恩</td></tr>
                    <tr><td>莫扎特</td><td>男</td><td>1756</td><td>德国-萨尔兹堡</td></tr>
                    <tr><td>爱因斯坦</td><td>男</td><td>1879</td><td>德国-乌尔姆市</td></tr>
                    <tr><td>居里夫人</td><td>女</td><td>1867</td><td>波兰-华沙</td></tr>
                    <tr><td>米开朗琪罗</td><td>男</td><td>1475</td><td>意大利-佛罗伦萨</td></tr>
                    <tr><td>列夫·托尔斯泰</td><td>男</td><td>1828</td><td>俄国</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <h3>表格单选框选中变色</h3>
    <div class="row" id="table2">
        <div class="col-md-6 col-md-offset-3">
            <table class="table table-bordered">
                <thead>
                    <tr><th>请选择</th><th>姓 名</th><th>性 别</th><th>出生年份</th><th>家乡</th></tr>
                </thead>
                <tbody>
                    <tr><td><input name="celebrity" type="radio"></td><td>贝多芬</td><td>男</td><td>1770</td><td>德国-波恩</td></tr>
                    <tr><td><input name="celebrity" type="radio"></td><td>莫扎特</td><td>男</td><td>1756</td><td>德国-萨尔兹堡</td></tr>
                    <tr><td><input name="celebrity" type="radio" checked></td><td>爱因斯坦</td><td>男</td><td>1879</td><td>德国-乌尔姆市</td></tr>
                    <tr><td><input name="celebrity" type="radio"></td><td>居里夫人</td><td>女</td><td>1867</td><td>波兰-华沙</td></tr>
                    <tr><td><input name="celebrity" type="radio"></td><td>米开朗琪罗</td><td>男</td><td>1475</td><td>意大利-佛罗伦萨</td></tr>
                    <tr><td><input name="celebrity" type="radio"></td><td>列夫·托尔斯泰</td><td>男</td><td>1828</td><td>俄国</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <h3>表格复选框选中变色</h3>
    <div class="row" id="table3">
        <div class="col-md-6 col-md-offset-3">
            <table class="table table-bordered">
                <thead>
                    <tr><th>请选择</th><th>姓 名</th><th>性 别</th><th>出生年份</th><th>家乡</th></tr>
                </thead>
                <tbody>
                    <tr><td><input name="celebrity" type="checkbox" checked></td><td>贝多芬</td><td>男</td><td>1770</td><td>德国-波恩</td></tr>
                    <tr><td><input name="celebrity" type="checkbox"></td><td>莫扎特</td><td>男</td><td>1756</td><td>德国-萨尔兹堡</td></tr>
                    <tr><td><input name="celebrity" type="checkbox" checked></td><td>爱因斯坦</td><td>男</td><td>1879</td><td>德国-乌尔姆市</td></tr>
                    <tr><td><input name="celebrity" type="checkbox"></td><td>居里夫人</td><td>女</td><td>1867</td><td>波兰-华沙</td></tr>
                    <tr><td><input name="celebrity" type="checkbox"></td><td>米开朗琪罗</td><td>男</td><td>1475</td><td>意大利-佛罗伦萨</td></tr>
                    <tr><td><input name="celebrity" type="checkbox"></td><td>列夫·托尔斯泰</td><td>男</td><td>1828</td><td>俄国</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <h3>表格分组折叠</h3>
    <div class="row" id="table4">
        <div class="col-md-6 col-md-offset-3">
            <table class="table table-bordered">
                <thead>
                    <tr><th>姓 名</th><th>性 别</th><th>出生年份</th><th>家乡</th></tr>
                </thead>

                <tbody>
                    <tr id="row_01"><td colspan="4">音乐家</td></tr>
                    <tr class="child_row_01"><td>贝多芬</td><td>男</td><td>1770</td><td>德国-波恩</td></tr>
                    <tr class="child_row_01"><td>莫扎特</td><td>男</td><td>1756</td><td>德国-萨尔兹堡</td></tr>

                    <tr id="row_02"><td colspan="4">科学家</td></tr>
                    <tr class="child_row_02"><td>爱因斯坦</td><td>男</td><td>1879</td><td>德国-乌尔姆市</td></tr>
                    <tr class="child_row_02"><td>居里夫人</td><td>女</td><td>1867</td><td>波兰-华沙</td></tr>

                    <tr id="row_03"><td colspan="4">画家</td></tr>
                    <tr class="child_row_03"><td>米开朗琪罗</td><td>男</td><td>1475</td><td>意大利-佛罗伦萨</td></tr>

                    <tr id="row_04"><td colspan="4">作家</td></tr>
                    <tr class="child_row_04"><td>列夫·托尔斯泰</td><td>男</td><td>1828</td><td>俄国</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <h3>表格搜索</h3>
    <div class="row" id="table5">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group input-group col-md-4">
               <!-- <input class="form-control" id="search">
                <span class="input-group-btn">
                    <button class="btn btn-success" id="btn_search">搜索</button>
                </span>-->
                <input class="form-control" id="search" placeholder="请输入搜索内容：">
            </div>

            <table class="table table-bordered">
                <thead>
                <tr><th>姓 名</th><th>性 别</th><th>出生年份</th><th>家乡</th></tr>
                </thead>
                <tbody>
                <tr><td>贝多芬</td><td>男</td><td>1770</td><td>德国-波恩</td></tr>
                <tr><td>莫扎特</td><td>男</td><td>1756</td><td>德国-萨尔兹堡</td></tr>
                <tr><td>爱因斯坦</td><td>男</td><td>1879</td><td>德国-乌尔姆市</td></tr>
                <tr><td>居里夫人</td><td>女</td><td>1867</td><td>波兰-华沙</td></tr>
                <tr><td>米开朗琪罗</td><td>男</td><td>1475</td><td>意大利-佛罗伦萨</td></tr>
                <tr><td>列夫·托尔斯泰</td><td>男</td><td>1828</td><td>俄国</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div style="height: 500px"></div><!---->
</div>
<script>
$(function () {
//    普通表格
    $("#table1 tbody>tr:even").addClass("even");
    $("#table1 tbody>tr:odd").addClass("odd");
    $("#table1 tbody>tr:contains(爱因斯坦)").addClass("highLight");

//    单选框表格
    $("#table2 tbody>tr:even").addClass("even");
    $("#table2 tbody>tr:odd").addClass("odd");
    $("#table2 tbody>tr").click(function(){
        $(this).find("input").prop("checked",true)
                .end().addClass("highLight").siblings().removeClass("highLight");
        //end()是将匹配的元素恢复到上一个状态，这里即为this
    })
//    $("#table2 :checked").parents("tr").addClass("highLight");
    $("#table2 tr:has(:checked)").addClass("highLight");//效果同上，写法不同

//    复选框表格
    $("#table3 tbody>tr:even").addClass("even");
    $("#table3 tbody>tr:odd").addClass("odd");
    $("#table3 tbody>tr").click(function(){
        var $isChecked  = $(this).find("input").prop("checked");
        $(this).find("input").prop("checked",!$isChecked)
                //这里中括号返回的值已经带了方法前面的点了
                .end()[$isChecked ? "removeClass" : "addClass"]("highLight");
    });
    $("#table3 tr:has(:checked)").addClass("highLight");

//    分组折叠表格
    $("#table4 tr[id]").addClass("even");
    $("#table4 tr[id]").click(function(){
        $(this).toggleClass("highLight")
                .siblings(".child_"+this.id).toggle();
    }).click()

//    搜索表格
    $("#search").keyup(function(){
        $("#table5 tbody tr").hide()
                .filter(":contains("+$(this).val()+")").show();
    }).keyup()
})

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>